<template>
  <div class="login-wapper">
    <div class="login">
      <transition name="van-slide-up">
        <div class="logo" v-if="flag">
          <img :src="loginCode" alt="" class="qrcode" />
          <i class="iconfont icon-wangyiyunyinle1"></i>

          <div class="edit">
            <van-button
              type="primary"
              color="#DC2C1F"
              plain
              block
              class="wd80 mg0a borderbox br30"
              @click="phoneLogin"
              >手机号登录</van-button
            >
            <van-button
              @click="pwLogin"
              type="primary"
              color="#DC2C1F"
              plain
              block
              class="wd80 mg0a borderbox br30"
              style="
                margin-top: 12px;
                color: #fff;
                background-color: #dc2c1f;
                border: 1px solid #fff;
              "
              >账号密码登录</van-button
            >
            <!-- <div class="phoneLogin lh40 wd80 mg0a borderbox br30">手机号登录</div> -->
            <!-- <div class="wechatLogin lh40 wd80 mg0a borderbox br30">微信登录</div> -->
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { showNotify } from 'vant'
import { getKey, getQrcode, check } from '@/service/api/login.js'

import { getLoginStatusRequest } from '@/service/api/user.js'

const router = useRouter()

let loginCode = ref('')
let key = ''
async function getkey() {
  const res = await getKey()
  // console.log(res.data.data.unikey)
  key = res.data.data.unikey
  // console.log(key)
  const res1 = await getQrcode(key)
  console.log(res1.data.data.qrimg)
  loginCode.value = res1.data.data.qrimg
}

const Check = async () => {
  const { data: res } = await check(key)
  // console.log(res.code)
  if (res.code === 803) {
    console.log('登陆成功')
    showNotify({ type: 'success', message: '登陆成功' })
    localStorage.setItem('token', res.cookie)
    clearInterval(checkTime)

    // 登陆成功后获取用户信息

    const { data: res1 } = await getLoginStatusRequest()
    // console.log(res1.data)
    localStorage.setItem('userInfo', JSON.stringify(res1.data))

    router.push('/found')
  }
}
const checkTime = setInterval(() => {
  Check()
}, 2000)

//检测是否扫码
// function

const flag = ref(false)
onMounted(() => {
  flag.value = true

  getkey()
})
function phoneLogin() {
  router.push('./phonelogin')
}
function pwLogin() {
  router.push('./pwlogin')
}
function send() {}
</script>
<style scoped>
.login-wapper {
  height: 100%;
  width: 100%;
}
.login-wapper .login {
  height: 100%;
  width: 100%;
}
.login-wapper .login .logo {
  height: 100%;
  width: 100%;
  background-color: #dc2c1f;
  text-align: center;
  padding-top: 120px;
  box-sizing: border-box;

  /* margin-top: 30px; */
}
.logo .icon-wangyiyunyinle1 {
  color: #fff;
  font-size: 40px;
  background-color: #f12b23;
  border-radius: 50%;
  padding: 10px;
}

.phoneLogin {
  background-color: #fff;
  color: red;
}
.wechatLogin {
  color: #fff;
}
.edit {
  margin-top: 120%;
}
.qrcode {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
</style>
